/**
 * Generates a set of style rules for the "navigation" tab UI.
 */
@include extjs-tab-panel-ui(
    $ui: 'navigation',
    $ui-tab-background-color: transparent,
    $ui-tab-background-color-over: rgba(91, 91, 91, 1),
    $ui-tab-background-color-active: $navigation-background-color-active,
    $ui-tab-background-gradient: 'none',
    $ui-tab-background-gradient-over: rgba(91, 91, 91, 1),
    $ui-tab-background-gradient-active: 'none',
    $ui-tab-color: #c5c5c5,
    $ui-tab-color-over: $lightest-color,
    $ui-tab-color-active: $lightest-color,
    $ui-tab-glyph-color: $lightest-color,
    $ui-tab-glyph-color-over: $lightest-color,
    $ui-tab-glyph-color-active: $lightest-color,
    $ui-tab-glyph-opacity: 1,
    $ui-tab-border-radius: 0,
    $ui-tab-border-width: 0,
    $ui-tab-inner-border-width: 0,
    $ui-tab-padding: 20px,
    $ui-tab-margin: 0,
    
    $ui-tab-font-family: '微软雅黑',
    $ui-tab-font-size: 14px,
    $ui-tab-font-size-over: 14px,
    $ui-tab-font-size-active: 14px,
    $ui-tab-line-height: 19px,
    $ui-tab-font-weight: 400,
    $ui-tab-font-weight-over: 400,
    $ui-tab-font-weight-active: 400,
    $ui-tab-icon-width: 24px,
    $ui-tab-icon-height: 24px,
    $ui-tab-icon-spacing: 5px,
    $ui-bar-background-color: $navigation-background-color,
    $ui-bar-background-gradient: 'none',
    $ui-bar-padding: 0,
    $ui-strip-height: 0
);

/**
 * Generates a set of style rules for the "navigation" panel UI.
 */
@include extjs-panel-ui(
    $ui: 'navigation',
    $ui-header-color: $lightest-color,
    $ui-header-glyph-color: $lightest-color,
    $ui-header-glyph-opacity: 1,
    $ui-header-font-size: 18px,
    $ui-header-font-family: '微软雅黑',
    $ui-header-line-height: 18px,
    $ui-header-font-weight: 400,
    $ui-header-icon-height: 24px,
    $ui-header-icon-width: 24px,
    $ui-header-icon-spacing: 15px,
    $ui-header-background-color: $base-color,
    $ui-header-padding: 0,
    $ui-header-text-margin: 10px,
    $ui-header-noborder-adjust: false
);

.x-tab-bar-navigation {
	left: 5px !important;
}

.x-tab-navigation-top {
	height: 54px;
}

.x-tab-bar-body-navigation {
	min-height: 54px !important;
}

.x-title-icon-navigation {
    font-family: FontAwesome;
    color: $lightest-color;
    font-size: 24px;
    line-height: 24px;
}

.x-tab-icon-el-navigation {
    font-family: FontAwesome;
    color: $lightest-color;

    .x-tab-over & {
        color: $lightest-color;
    }

    .x-tab-active & {
        color: $lightest-color;
    }
}

.x-panel-header-title-navigation > .x-title-text-navigation:after {
    top: 30px;
    right: -24px;
}


//--------------------------------------------------------
// Create classes for full-size responsive items

.big-100 {
    @include responsivecolumn-item(100%);
}

.big-60 {
    @include responsivecolumn-item(60%);
}

.big-50 {
    @include responsivecolumn-item(50%);
}

.big-40 {
    @include responsivecolumn-item(40%);
}

.big-33 {
    @include responsivecolumn-item(33.33%);
}

.big-20 {
    @include responsivecolumn-item(20%);
}

//--------------------------------------------------------
// And classes for small-size responsive items

 .x-responsivecolumn-small {
     > .small-100 {
         @include responsivecolumn-item(100%);
     }

     > .small-50 {
         @include responsivecolumn-item(50%);
     }
}

//--------------------------------------------------------

.toolbar-btn-shadow{
    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    .x-btn-over{
        background-color: $button-toolbar-hover-background-color;
    }
}

//-------------------------------------------------------- UI Styles for buttons
@include extjs-button-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-blue',
    $line-height: 34px,
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-blue',
    $background-color: $color-soft-blue,
    $border-color: darken($color-soft-blue, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-cyan',
    $line-height: 34px,
    $background-color: $color-soft-cyan,
    $border-color:darken($color-soft-cyan, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-cyan',
    $background-color: $color-soft-cyan,
    $border-color: darken($color-soft-cyan, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-green',
    $line-height: 34px,
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-green',
    $background-color: $color-soft-green,
    $border-color:darken($color-soft-green, 5%)
);



@include extjs-button-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-red',
    $line-height: 34px,
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-red',
    $background-color: $color-soft-red,
    $border-color:darken($color-soft-red, 5%)
);


@include extjs-button-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);
@include extjs-button-large-ui(
    $ui: 'soft-purple',
    $line-height: 34px,
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'soft-purple',
    $background-color: $color-soft-purple,
    $border-color:darken($color-soft-purple, 5%)
);


@include extjs-button-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-large-ui(
    $ui: 'gray',
    $line-height: 34px,
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'gray',
    $background-color: $color-gray,
    $border-color:darken($color-gray, 5%)
);

@include extjs-button-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'green',
    $background-color: $color-green,
    $border-color:darken($color-green, 5%)
);


@include extjs-button-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);
@include extjs-button-toolbar-small-ui(
    $ui: 'blue',
    $background-color: $color-blue,
    $border-color:darken($color-blue, 5%)
);

//--------------------------------------------------------

.sencha-logo {
	background:url(images/icons/logo.png) no-repeat 14px center;
	background-size: 32px 32px;  
    background-color: $navigation-background-color !important;

    height: 54px;
	line-height: 54px;

	.x-panel-header-title {
 		color: $lightest-color;
    	font-size: 18px;
    	padding-left : 44px;
    	font-family: '微软雅黑';
    	font-style: normal;
    	font-weight: 400;
    }
}

.sencha-main-menu-header {
    background-color: $navigation-background-color !important;
}

.sencha-dash-dash-headerbar {
	color: $lightest-color;
    left: auto !important;
    right: 0px !important;
    z-index:10;
    border: none;
    background-color: $navigation-background-color;
    
    .header-right-profile-image {
    	background: none;
        border-radius: 20px;
    }
    
	.x-btn.x-btn-pressed.x-btn-default-toolbar-small {
		border: 0px;
		background: none;
	}

    .x-btn-default-toolbar-small {
    	border: 0px;
    	background: none;
    }
    
    .x-btn-icon > .x-btn-icon-el {
    	color: $lightest-color;
    	font-size: 16px;
	    line-height: 16px;
    }
}

.x-fa {
  display: inline-block;
  font: normal normal normal 14px/1 $font-family;
}

.delete-focus-bg {
	font-size : 24px !important;
	padding: 7px 0px 7px 2px;
    &:focus, &:hover{
        background: none;
    }
}

.top-user-name {
	color: #ffff99;
	font-family: '微软雅黑';
}

.top-text {
	color: $lightest-color;
	font-family: '微软雅黑';
}

.top-alert {
	color: red;
	font-family: '微软雅黑';
}

.header-right-profile-image {
    border-radius: 20px;
}

.x-tab-focus {
	.x-tab-navigation {
		outline: false !important;
	}
}

.x-tab-focus.x-tab-navigation {
	outline: false !important;
}

.view-container {
	background-color: #f6f6f6 !important;
}

.x-panel-body-navi {
	background-color: #f6f6f6 !important;
}

.x-tab-bar-default {
	background-color: #34ae89;
}

.email-inbox-panel{
    .fa-heart:before {
        color: $active-heart-icon-color;
    }

    .fa-heart-o:before{
        color: $inactive-heart-icon-color;
    }

    .x-grid-body{
        border-width: 1px;
    }

    .x-grid-cell-special{
        border-right-width: 0;
    }
    
    .x-grid-cell-inner-row-numberer {
    	background-color: transparent !important;
	}
}